{extend name="../apps/admin/view/public/base.html"/}
{block name="style"}
<link href="__LIBS__/daterangepicker/daterangepicker-bs3.css" type="text/css" rel="stylesheet">
{/block}

{block name="main"}
<section class="content pt-5">
<div class="box box-solid eacoo-box">
    <div class="box-body">
        <div class="row">

          <div class="col-md-10 mt-10">
            <form action="" method="post">                
              <div class="col-xs-5">         
                  <div class="input-group">
                    <div class="input-group-addon">
                        选择时间  <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" name="timegap" value="{$timegap}" id="start_time">
                  </div>
              </div>
                <div class="col-xs-1"><button class="btn btn-info" type="submit">确定</button></div>
              </form>
            </div>

            <div class="col-md-12 mt-20">
              <div class="col-sm-3 col-xs-6">
                今日新增会员：{$user.today}
              </div>
                <div class="col-sm-3 col-xs-6">
                本月新增会员：{$user.month}
              </div>
                <div class="col-sm-3 col-xs-6">
                会员总数：{$user.total}
              </div>
                <div class="col-sm-3 col-xs-6">
                会员余额总额：{$user.user_money}
              </div>
            </div>

            <div class="col-md-12 mt-20 mb-20">
              <div class="col-sm-3 col-xs-6">
                匿名会员购物总额：
              </div>
              <div class="col-sm-3 col-xs-6">
                匿名会员订单数：
              </div>
              <div class="col-sm-3 col-xs-6">
                匿名会员评价订单额：
              </div>
              <div class="col-sm-3 col-xs-6">
                有单会员数：{$user.hasorder}
              </div>
            </div>
        </div>

        <hr>
        <div class="chart mt-20">
          <div id="statistics" style="height: 400px;"></div>
        </div>
    </div>
</div>
</section>
{/block}

{block name="script"}
<script src="__LIBS__/echarts/echarts.common.min.js" type="text/javascript"></script>
<!--   <script src="__LIBS__/echarts/macarons.js"></script>
  <script src="__LIBS__/echarts/china.js"></script> -->

<script src="__LIBS__/daterangepicker/moment.min.js"></script>
<script src="__LIBS__/daterangepicker/daterangepicker.js"></script>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('statistics'),'macarons');
    var res = {$result};
    option = {
          title : {
              text: '会员新增趋势'
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              data:['新增会员','有单会员']
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {show: true, type: ['line', 'bar']},
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : res.time
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  axisLabel : {
                      formatter: '{value} 人'
                  }
              }
          ],
          series : [
              {
                  name:'新增会员',
                  type:'line',
                  data:res.data
              }
          ]
      };
      myChart.setOption(option);

      $(document).ready(function() {
        $('#start_time').daterangepicker({
          format:"YYYY-MM-DD",
          singleDatePicker: false,
          showDropdowns: true,
          minDate:'2016-01-01',
          maxDate:'2030-01-01',
          startDate:'2016-01-01',
              showWeekNumbers: true,
              timePicker: false,
              timePickerIncrement: 1,
              timePicker12Hour: true,
              ranges: {
                 '今天': [moment(), moment()],
                 '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
                 '最近7天': [moment().subtract('days', 6), moment()],
                 '最近30天': [moment().subtract('days', 29), moment()],
                 '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
              },
              opens: 'right',
            locale : {
                  applyLabel : '确定',
                  cancelLabel : '取消',
                  fromLabel : '起始时间',
                  toLabel : '结束时间',
                  customRangeLabel : '自定义',
                  daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                  monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                  firstDay : 1
              }
        });
      });
    </script>
  {/block}